<template>
	<view :data-theme="theme" class="container">
		<u--form labelPosition="left" style="margin:10rpx 20rpx;" :model="businessInfo" :rules="rules" ref="uForm">
			<view class="header">
				<h2>填写预约单</h2>
				<view class="card">
					<u-form-item label="是否预约仓库贴码" prop="isReservationLabel" borderBottom labelWidth="150"
						style="padding: 0 15px;" :required="true">
						<!-- <u-radio-group v-model="businessInfo.isReservationLabel">
							<u-radio :customStyle="{marginRight: '30px'}" v-for="(item, index) in radiolist"
								:key="index" :label="item.name" :name="item.type">
							</u-radio>
						</u-radio-group> -->
						<radio-group @change="radioChange" style="display: flex;"
							v-model="businessInfo.isReservationLabel">
							<view style="display: flex;flex-direction: row;margin: 0 20rpx;"
								v-for="(item, index) in radiolist" :key="index">
								<view>
									<radio :value="JSON.stringify(item.type)" :checked="index === current" />
								</view>
								<view style="line-height: 19px;">{{item.name}}</view>
							</view>
						</radio-group>

					</u-form-item>
					<u-form-item label="配送批次" prop="distributionWaveNumber" borderBottom labelWidth="150"
						style="padding: 0 15px;" :required="true">
						<!-- <u-radio-group v-model="businessInfo.distributionWaveNumber">
							<u-radio :customStyle="{marginRight: '30px'}" v-for="(item, indexY) in radiolist2"
								:key="indexY" :label="item.name" :name="item.type">
							</u-radio>
						</u-radio-group> -->
						<radio-group @change="radioChangeY" style="display: flex;"
							v-model="businessInfo.distributionWaveNumber">
							<view style="display: flex;flex-direction: row;margin: 0 20rpx;"
								v-for="(item, indexY) in radiolist2" :key="indexY">
								<view>
									<radio :value="JSON.stringify(item.type)" :checked="indexY === currentY" />
								</view>
								<view style="line-height: 19px;">{{item.name}}</view>
							</view>
						</radio-group>
					</u-form-item>
					<u-form-item label="预约类型" prop="appointmentType" borderBottom labelWidth="150"
						style="padding: 0 15px;" :required="true">
						<!-- <u-radio-group v-model="businessInfo.appointmentType">
							<u-radio :customStyle="{marginRight: '30px'}" v-for="(item, index) in radiolist3"
								:key="index" :label="item.name" :name="item.type">
							</u-radio>
						</u-radio-group> -->
						<radio-group @change="radioChangeZ" style="display: flex;"
							v-model="businessInfo.appointmentType">
							<view style="display: flex;flex-direction: row;margin: 0 10rpx;"
								v-for="(item, indexZ) in radiolist3" :key="indexZ">
								<view>
									<radio :value="JSON.stringify(item.type)" :checked="indexZ === currentZ" />
								</view>
								<view style="line-height: 19px;">{{item.name}}</view>
							</view>
						</radio-group>
					</u-form-item>
					<picker model="selector" @change="invoiceTypeConfirm" range-key="name" :value="deliverDataIndex"
						:range="deliverDate">
						<u-form-item label="交货方式" prop="deliverWayName" borderBottom labelWidth="150"
							style="padding: 0 15px;" :required="true">
							<input v-model="businessInfo.deliverWayName" disabled placeholder="请选择"
								@click="depotTypeShow = true" border="none"></input>
							<u-icon slot="right" name="arrow-right" @click="depotTypeShow = true"></u-icon>
						</u-form-item>
					</picker>
					<u-form-item label="来源单号" prop="sourceNumberId" borderBottom labelWidth="150"
						style="padding: 0 15px;" :required="true">
						<input v-model="businessInfo.sourceNumberId" placeholder="请输入" border="none"></input>
					</u-form-item>
					<u-form-item label="预约送货时间" labelWidth="150" borderBottom prop="deliveryTime"
						style="padding: 0 15px;" :required="true">
						<view class="example-body" style="display: flex;flex: 1;">
							<uni-datetime-picker :start="start" type="datetime" v-model="businessInfo.deliveryTime"
								@change="changeLog" />
						</view>
					</u-form-item>
					<u-form-item label="预计到货时间" labelWidth="150" borderBottom prop="scheduledArrivalTime"
						style="padding: 0 15px;" :required="true">
						<view class="example-body" style="display: flex;flex: 1;">
							<uni-datetime-picker :start="start" type="datetime"
								v-model="businessInfo.scheduledArrivalTime" @change="changeScheduledArrivalTime" />
						</view>
					</u-form-item>
					<picker model="selector" @change="depotNameTypeConfirm" range-key="depotName" :value="depotDataIndex"
						:range="depotList">
						<u-form-item label="仓库名称" prop="depotName" labelWidth="150" borderBottom
							style="padding: 0 15px;" :required="true">
							<input v-model="businessInfo.depotName" disabled placeholder="请选择"
								@click="depotNameTypeShow = true" border="none"></input>
							<u-icon slot="right" name="arrow-right" @click="depotNameTypeShow = true"></u-icon>
						</u-form-item>
					</picker>
					<u-form-item label="车牌号码" prop="vehicleNo" borderBottom labelWidth="150" style="padding: 0 15px;"
						:required="true">
						<input v-model="businessInfo.vehicleNo" placeholder="请输入" border="none"></input>
					</u-form-item>
					<u-form-item label="备注" prop="remark" labelWidth="150" style="padding: 0 15px;">
						<input v-model="businessInfo.remark" placeholder="请输入备注" border="none"></input>
					</u-form-item>
				</view>
			</view>
		</u--form>

		<view class="tab-view" :duration="300">
			<view class="swiper-item" style="display: flex;">
				<scroll-view class="scroll-view" @scrolltolower="scrolltolowerFn" scroll-y
					style="height: 100%; overflow: hidden;color: #000;">
					<h2>添加商品</h2>
					<!-- 可滚动内容 -->
					<view class="card-title" v-for="(item,index) in modifiedArray" :key="index"
						style="background-color: #fff;border-radius: 10rpx;margin: 20rpx;">
						<view style="display: flex;justify-content: space-between;margin: 20rpx;padding-top: 20rpx;">
							<view style="color: #000;font-size: 15px;font-weight: bold;">
								<text v-if="item.brand">[{{item.brand}}]</text>{{item.productName}}
							</view>
							<span type="text" @click="delateDate(index)">删除</span>
						</view>
						<!-- 选填内容 -->
						<view style="border-radius: 10px;">
							<u--form labelPosition="left">
								<u-form-item label="商品类型" labelWidth="150" style="border-bottom: 1px solid #eaebec;margin: 30rpx;">
									<!-- <u-radio-group v-model="modifiedArray[index].type">
										<u-radio :customStyle="{marginRight: '30px'}"
											v-for="(itemZ, indexZ) in radiolist4" :key="indexZ" :label="itemZ.name"
											:name="itemZ.type">
										</u-radio>
									</u-radio-group> -->
									<radio-group @change="radioChangeZZ" style="display: flex;"
										v-model="modifiedArray[index].type">
										<view style="display: flex;flex-direction: row;margin: 0 10rpx;"
											v-for="(itemZ, indexZ) in radiolist4" :key="indexZ">
											<view>
												<radio :value="JSON.stringify(itemZ.type)"
													:checked="indexZ === currentZZ" />
											</view>
											<view style="line-height: 19px;">{{itemZ.name}}</view>
										</view>
									</radio-group>
								</u-form-item>
								<!-- <u-form-item>
									<u-cell-group>
										<u-cell size="large" title="商品规格" titleStyle="width:150px;"
											:value="item.skuName"></u-cell>
									</u-cell-group>
								</u-form-item> -->
								<view
									style="display: flex;border-bottom: 1px solid #eaebec;font-size: 30rpx;margin: 30rpx;padding-bottom: 30rpx;">
									<view style="flex: 1;">
										商品规格
									</view>
									<view style="flex: 2;">
										{{item.skuName}}
									</view>
								</view>
								<u-form-item label="生产日期" labelWidth="100" borderBottom style="padding: 0 15px;"
									prop="expirationTime">
									<view class="example-body" style="display: flex;flex: 1;">
										<uni-datetime-picker :end="start" type="datetime"
											v-model="item.expirationTime" />
									</view>
								</u-form-item>
								<u-form-item label="有效期至" labelWidth="100" borderBottom style="padding: 0 15px;"
									prop="dateOfPro">
									<view class="example-body" style="display: flex;flex: 1;">
										<uni-datetime-picker :start="start" type="datetime" v-model="item.dateOfPro" />
									</view>
								</u-form-item>
								<!-- <u-form-item>
									<u-cell-group :border="false">
										<u-cell size="large" title="规格单位" titleStyle="width:150px;"
											:value="item.goodsUnit"></u-cell>
									</u-cell-group>
								</u-form-item> -->
								<view
									style="display: flex;border-bottom: 1px solid #eaebec;font-size: 30rpx;margin: 30rpx;padding-bottom: 30rpx;">
									<view style="flex: 1;">
										规格单位
									</view>
									<view style="flex: 2;">
										{{item.goodsUnit}}
									</view>
								</view>
								<u-form-item label="商品数量" labelWidth="100" style="padding: 0 15px;">
									<u--input v-model="item.goodsNumber" type="number" border="none" placeholder="请输入"
										style="margin-left: 20px;"></u--input>
								</u-form-item>
							</u--form>
						</view>
					</view>

					<view class="middle" style="margin: 0 20rpx;">
						<!-- <u-button type="primary" :color="bgColor" :plain="true" text="+ 添加商品"
							@click="goChooseProduct()"></u-button> -->
						<button class="plain_bgColor"
							style="font-weight: bold;border-radius: 10px;color: #FFF;padding: 20rpx;" :color="bgColor"
							@click="goChooseProduct()">+ 添加商品</button>
					</view>
					<view style="height: 60rpx;"></view>
				</scroll-view>
			</view>
		</view>

		<!-- 交货方式名称 -->
		<!-- <u-picker style="flex: 0;!important" :defaultIndex="invoiceTypeIndex" :show="depotTypeShow" :columns="deliverDate"
			:closeOnClickOverlay="true" @confirm="invoiceTypeConfirm" @close="depotTypeShow = false"
			@cancel="depotTypeShow = false" keyName="name">
		</u-picker> -->
		<!-- 仓库选择 -->
	<!-- 	<u-picker style="flex: 0;!important" :defaultIndex="depotNameTypeIndex" :show="depotNameTypeShow"
			:columns="depotNameData" :closeOnClickOverlay="true" @confirm="depotNameTypeConfirm"
			@close="depotNameTypeShow = false" @cancel="depotNameTypeShow = false" keyName="depotName">
		</u-picker> -->

		<view class="footer">
			<view style="margin:0 20rpx 20rpx 20rpx;">
				<!-- <u-button :color="bgColor" :disabled="!modifiedArray.length" text="提交预约单" style="color: #fff;"
					@click="upAddscheduled()"></u-button> -->
				<button :color="bgColor" :disabled="!modifiedArray.length" class="bg_color"
					style="font-weight: bold;border-radius: 10px;color: #FFF;padding: 20rpx;"
					@click="upAddscheduled()">提交预约单</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryDepotInformationApi
	} from '@/api/goodsAndDepot.js';
	import {
		addCancelScheduledApi
	} from '@/api/scheduledDelivery.js';
	import {
		categoryApi,
	} from '@/api/product.js';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	import {
		login
	} from '../../../api/public';
	let app = getApp();
	// var unit = require('../../../common/units.js');
	export default {
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				businessInfo: {
					isReservationLabel: 1,
					distributionWaveNumber: 1,
					appointmentType: 1,
					deliverWayName: '',
					sourceNumberId: '',
					deliveryTime: '',
					scheduledArrivalTime: '',
					depotName: '',
					vehicleNo: '',
					remark: '',
				},
				radiolist: [{
					name: '预约',
					type: 1,
				}, {
					name: '不预约',
					type: 2,
				}],
				current: 0,
				radiolist2: [{
					name: '上午',
					type: 1,
				}, {
					name: '下午',
					type: 2,
				}],
				currentY: 0,
				radiolist3: [{
					name: '预售品',
					type: 1,
				}, {
					name: '寄售品',
					type: 2,
				}],
				currentZ: 0,
				radiolist4: [{
					name: '成品',
					type: 1,
				}, {
					name: '包装物',
					type: 2,
				}],
				currentZZ: 0,
				depotTypeShow: false, //选择交货方式下拉框
				depotNameTypeShow: false, //仓库选择下拉框
				invoiceTypeIndex: [0], //默认选择
				depotNameTypeIndex: [0], //仓库默认选择
				deliverDate: [{
					name: '直送仓库',
					type: 1,
				}, {
					name: '驻场加工',
					type: 2,
				}, {
					name: '送提货点',
					type: 3,
				}, {
					name: '上门揽收',
					type: 4,
				}],
				deliverDataIndex: 0,
				depotNameData: [],
				// 校验
				rules: {
					deliverWayName: [{
						type: 'string',
						required: true,
						message: '请选择送货方式',
						trigger: ['blur', 'change']
					}],
					sourceNumberId: [{
						type: 'string',
						required: true,
						message: '请输入来源单号',
						trigger: ['blur', 'change']
					}],
					deliveryTime: [{
						type: 'string',
						required: true,
						message: '请选择送货时间',
						trigger: ['blur', 'change']
					}],
					depotName: {
						type: 'string',
						required: true,
						message: '请选择送货仓库',
						trigger: ['blur', 'change']
					},
					scheduledArrivalTime: [{
						type: 'string',
						required: true,
						message: '请选择预计到货时间',
						trigger: ['blur', 'change']
					}],
					vehicleNo: [{
						type: 'string',
						required: true,
						message: '请输入车牌号码',
						trigger: ['blur', 'change']
					}, {
						pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/,
						message: '车牌号码格式不正确',
						trigger: ['blur', 'change']
					}],
				},
				categoryTree: [], //商品分类集合
				modifiedArray: [], //新添加的对象数组
				addInnterIndex: '', //索引
				// brandValue: [], //添加的品牌的名字
				// categorryValue: [], //添加的商品分类的名字
				// unitList: [], //单位集合
				// showGroupUnit:false,
				// attrValue:[], //单位所选的
				start: '',
				end: '',
				depotList:[],
				depotDataIndex:0,
			};
		},
		async onLoad() {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			uni.$on('productClassTherFun', (productClass) => {
				if (productClass) {
					this.modifiedArray[this.addInnterIndex].category = productClass.name;
					this.$set(this.categorryValue, this.addInnterIndex, productClass.name);
				}
			}); //返回所选商品分类
			await this.getCategoryTree();
			this.getDepotList();
			this.start = Date.now();
			this.end = Date.now() + 1000000000;
		},
		methods: {
			// 获取城市 id
			getDepotList() {
				queryDepotInformationApi(this.depotForm).then((res) => {
					let depot = res.data.list
					let depotNameData = depot.map(obj => {
						const {
							createMemberName,
							depotAddress,
							depotTelephone,
							updatedMemberName,
							zoneId,
							...rest
						} = obj; //删除部分属性
						return rest
					}); //要删除的数据的数组
					this.depotNameData.push(depotNameData);
					this.depotList = depotNameData;
				})
			},
			
			// 仓库名称选择
			// depotNameTypeConfirm(item) {
			// 	let list = item.value[0].depotId;
			// 	this.depotId = list;
			// 	this.depotNameTypeShow = false;
			// 	this.businessInfo.depotId = list;
			// 	this.businessInfo.depotName = item.value[0].depotName;
			// 	this.$refs.uForm.validateField('depotName');
			// },
			depotNameTypeConfirm(item) {
				let i = item.detail.value;
				this.depotDataIndex = i;
				
				this.depotId = this.depotList[i].depotId;
				this.depotNameTypeShow = false;
				this.businessInfo.depotId = this.depotList[i].depotId;
				this.businessInfo.depotName = this.depotList[i].depotName;
				this.$refs.uForm.validateField('depotName');
			},
			
			// 运输方式选择
			// invoiceTypeConfirm(item) {
			// 	let list = item.value[0];
			// 	this.depotTypeShow = false;
			// 	this.businessInfo.deliverWayName = list.name;
			// 	this.businessInfo.deliverWay = item.value[0].type;
			// 	this.$refs.uForm.validateField('deliverWayName');
			// },
			invoiceTypeConfirm(item) {
				let i = item.detail.value;
				this.deliverDataIndex = i;

				this.depotTypeShow = false;
				this.businessInfo.deliverWayName = this.deliverDate[i].name;
				this.businessInfo.deliverWay = this.deliverDate[i].type;
				this.$refs.uForm.validateField('deliverWayName');
			},

			radioChange: function(evt) {
				for (let i = 0; i < this.radiolist.length; i++) {
					if (this.radiolist[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			radioChangeY: function(evt) {
				for (let i = 0; i < this.radiolist2.length; i++) {
					if (this.radiolist2[i].value === evt.detail.value) {
						this.currentY = i;
						break;
					}
				}
			},
			radioChangeZ: function(evt) {
				for (let i = 0; i < this.radiolist3.length; i++) {
					if (this.radiolist3[i].value === evt.detail.value) {
						this.currentZ = i;
						break;
					}
				}
			},
			radioChangeZZ: function(evt) {
				for (let i = 0; i < this.radiolist4.length; i++) {
					if (this.radiolist4[i].value === evt.detail.value) {
						this.currentZZ = i;
						break;
					}
				}
			},
			goChooseProduct() {
				this.goPage(`/pages/cancellingStock/chooseProductName/chooseProductName`);
			},

			// 商品名称页面传值
			otherFun(list) {
				if (list) {
					this.modifiedArray.push(...list);
					this.modifiedArray = this.modifiedArray.map(item => {
						return {
							...item,
							type: 1,
						};
					}); //数组对象添加属性名
				}
			},
			openGroupUnits(index) {
				this.addInnterIndex = index;
				this.showGroupUnit = true;
			},

			goGoodsClass(index) {
				this.addInnterIndex = index;
				this.goPage('/pages/product/productGoodsClass/productGoodsClass?');
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			},
			//前端页面删除新加
			delateDate(ele) {
				this.modifiedArray.splice(ele, 1) //使用splice 方法删除当前对象
			},
			//-----
			//查询平台端商品分类缓存树
			async getCategoryTree() {
				let res = await categoryApi();
				let that = this;
				if (res.code == 200) {
					// this.categoryTree = res.data;
					const result = [];
					for (const item1 of res.data) {
						for (const item2 of item1.childList) {
							for (const item3 of item2.childList) {
								result.push(item3);
							}
						}
					}
					this.categoryTree = result;
				}
			},
			// 预约时间选择
			changeLog(e) {
				this.businessInfo.deliveryTime = e;
				this.$refs.uForm.validateField('deliveryTime');
			},
			// 预约时间选择
			changeScheduledArrivalTime(e) {
				this.businessInfo.scheduledArrivalTime = e;
				this.$refs.uForm.validateField('scheduledArrivalTime');
			},

			// 提交预约单
			upAddscheduled() {
				this.$refs.uForm.validate().then(res => {
					// delete this.businessInfo.depotName;
					delete this.businessInfo.deliverWayName;
					this.businessInfo.productInfo = this.modifiedArray;
					const upAddDate = this.businessInfo;
					for (let item of upAddDate.productInfo) {
						if (item.goodsNumber == undefined || item.goodsNumber == 0) {
							uni.showToast({
								title: '请填写大于0的商品数量',
								icon: 'none', // 提示图标，可选值：'success', 'loading', 'none'
								duration: 2000 // 持续时间，单位为毫秒
							});
							return;
						}
					};
					addCancelScheduledApi(upAddDate).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: '提交成功',
								icon: 'success', // 提示图标，可选值：'success', 'loading', 'none'
								duration: 2000 // 持续时间，单位为毫秒
							});
							setTimeout(() => {
								const pages =
									getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
								const prevPage = pages[pages.length - 2]; // 获取上一级页面对象
								uni.navigateBack({
									delta: 1,
								});
							}, 1000)
						}
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},


			//去品牌页面----暂时不用（保留）
			// goBrand(index, ele) {
			// 	const item = {
			// 		index: index,
			// 		ele: ele,
			// 	}
			// 	this.goPage('/pages/categoryTable/categoryBrand/categoryBrand?data=' + JSON.stringify(item));
			// },
			// 传回新加入的品牌名----暂时不用（保留）
			// otherAddBrand(list) {
			// 	if (list) {
			// 		this.modifiedArray[list.index].brand = list.brandName;
			// 		console.log(this.modifiedArray)
			// 		this.$set(this.brandValue, list.index, list.brandName);
			// 	}
			// },
			//新增加地单位的 改变
			// tapAttr2(skuItem) {
			// 	console.log(skuItem)
			// 	this.$set(this.attrValue, this.addInnterIndex, skuItem.name);
			// 	for (let i = 0; i < Math.min(this.modifiedArray.length, this.attrValue.length); i++) {
			// 		this.modifiedArray[i].goodsUnit = this.attrValue[i];
			// 	} //给对象数组，将数组的字符串，添加给新属性
			// },
			// close(){
			// 	this.showGroupUnit = false;
			// },
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	h2 {
		font-weight: bold;
		font-size: 34rpx;
		padding: 20rpx;
	}

	.card {
		background-color: #fff;
		border-radius: 10rpx;
		margin: 20rpx;
	}

	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.header {
		background-color: #fff;
	}

	.tab-view {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	// .content {
	// 	flex: 1;
	// 	overflow: hidden;
	// }

	.scroll-view {
		height: 100%;
	}

	.u-demo-block2 {
		height: 70vh;
		padding: 20px;
	}

	.u-demo-block__title {
		font-size: 16px;
		font-weight: bold;
		display: block;
		text-align: center;
		margin-bottom: 20px;
	}

	.sku-select1 {
		.flex-text {
			margin: 8rpx 8rpx;
			background-color: #f7f7f7;
			line-height: 62rpx;
			text-align: center;
			color: #777;
			padding: 16rpx 34rpx;
			font-size: 26rpx;
			font-weight: bolder;
			border-radius: 10rpx;
			border: 1rpx solid #FFF;
		}

		.right-class-active {
			@include main_color(theme);
			@include main_bg_rgba_color(theme, 0.05);
			border: 1rpx solid;
		}
	}
</style>